import React, { Component } from 'react';
import '../css/right-menu.css'
import {
  TimelineMax,
  Power4,
  Power2
} from 'gsap/TweenMax';

class Home extends Component {
  constructor(props) {
    super(props)

    this.state = {
      close: true
    }
    this.tlOpen = null
    this.tlClose = null
  }
  componentDidMount() {
    this.init()
  }

  triggerRightMenu = () => {
    if(this.state.close){
      this.tlOpen.restart();
      this.tlOpen.play();
    } else {
      this.tlClose.restart();
      this.tlClose.play();
    }

    this.setState({close: !this.state.close})
  }

  init() {
    const openTrigger = document.querySelector('.menu-trigger');
    const openTriggerTop = document.querySelector('.menu-trigger-bar.top');
    const openTriggerMiddle = document.querySelector('.menu-trigger-bar.middle');
    const openTriggerBottom = document.querySelector('.menu-trigger-bar.bottom');

    const closeTrigger = document.querySelector('.close-trigger');
    const closeTriggerLeft = document.querySelector('.close-trigger-bar.left');
    const closeTriggerRight = document.querySelector('.close-trigger-bar.right');

    const logo = document.querySelector('.logo');

    const menu = document.querySelector('.menu-right');
    const menuTop = document.querySelector('.menu-bg.top');
    const menuMiddle = document.querySelector('.menu-bg.middle');
    const menuBottom = document.querySelector('.menu-bg.bottom');

    this.tlOpen = new TimelineMax({paused: true});
    this.tlClose = new TimelineMax({paused: true});

    this.tlOpen.add("preOpen")
      .to(logo, 0.4, { scale: 0.8, opacity: 0, ease: Power2.easeOut }, "preOpen")
      .to(openTriggerTop, 0.4, {
        x: "+80px", y: "-80px", delay: 0.1, ease: Power4.easeIn, onComplete: function() {
          closeTrigger.style.zIndex = 25;
        }
      }, "preOpen")
      .to(openTriggerMiddle, 0.4, {
        x: "+=80px", y: "-=80px", ease: Power4.easeIn,
        onComplete: function() {
          openTrigger.style.visibility = 'hidden';
        }
      }, "preOpen")
      .to(openTriggerBottom, 0.4, { x: "+=80px", y: "-=80px", delay: 0.2, ease: Power4.easeIn }, "preOpen")
      .add("open", "-=0.4")
      .to(menuTop, 0.8, { y: "13%", ease: Power4.easeInOut }, "open")
      .to(menuMiddle, 0.8, { scaleY: 1, ease: Power4.easeInOut }, "open")
      .to(menuBottom, 0.8, { y: "-114%", ease: Power4.easeInOut }, "open")
      .fromTo(menu, 0.6,
        { y: 30, opacity: 0, visibility: 'hidden' },
        { y: 0, opacity: 1, visibility: 'visible', ease: Power4.easeOut }, "-=0.2")
      .add("preClose", "-=0.8")
      .to(closeTriggerLeft, 0.8, { x: "-=100px", y: "+=100px", ease: Power4.easeOut }, "preClose")
      .to(closeTriggerRight, 0.8, { x: "+=100px", y: "+=100px", delay: 0.2, ease: Power4.easeOut }, "preClose");

    this.tlClose.add("close")
      .to(menuTop, 0.2, {
        backgroundColor: "#6295ca", ease: Power4.easeInOut, onComplete: function() {
          logo.style.zIndex = 26;
          closeTrigger.style.zIndex = 5;
          openTrigger.style.visibility = 'visible';
        }
      }, "close")
      .to(menuMiddle, 0.2, { backgroundColor: "#6295ca", ease: Power4.easeInOut }, "close")
      .to(menuBottom, 0.2, { backgroundColor: "#6295ca", ease: Power4.easeInOut }, "close")
      .to(menu, 0.6, {
        y: 20, opacity: 0, ease: Power4.easeOut, onComplete: function() {
          menu.style.visibility = 'hidden';
        }
      }, "close")
      .to(logo, 0.8, { scale: 1, opacity: 1, ease: Power4.easeInOut }, "close", "+=0.2")
      .to(menuTop, 0.8, { y: "-113%", ease: Power4.easeInOut }, "close", "+=0.2")
      .to(menuMiddle, 0.8, { scaleY: 0, ease: Power4.easeInOut }, "close", "+=0.2")
      .to(menuBottom, 0.8, { y: "23%", ease: Power4.easeInOut,
        onComplete: function() {
          menuTop.style.backgroundColor = '#ffffff';
          menuMiddle.style.backgroundColor = '#ffffff';
          menuBottom.style.backgroundColor = '#ffffff';
        }
      }, "close", "+=0.2")
      .to(closeTriggerLeft, 0.2, { x: "+=100px", y: "-=100px", ease: Power4.easeIn }, "close")
      .to(closeTriggerRight, 0.2, { x: "-=100px", y: "-=100px", delay: 0.1, ease: Power4.easeIn }, "close")
      .to(openTriggerTop, 1, { x: "-=80px", y: "+=80px", delay: 0.2, ease: Power4.easeOut }, "close")
      .to(openTriggerMiddle, 1, { x: "-=80px", y: "+=80px", ease: Power4.easeOut }, "close")
      .to(openTriggerBottom, 1, { x: "-=80px", y: "+=80px", delay: 0.1, ease: Power4.easeOut }, "close");
  }
  render() {
    return (
      <div className={`container ${this.state.close?'closed':'opened'}`}>
        <span className="menu-trigger" onClick={this.triggerRightMenu}>
          <i className="menu-trigger-bar top" />
          <i className="menu-trigger-bar middle" />
          <i className="menu-trigger-bar bottom" />
        </span>
        <span className="close-trigger" onClick={this.triggerRightMenu}>
          <i className="close-trigger-bar left" />
          <i className="close-trigger-bar right" />
        </span>
        <p className="logo">
          <span>⬢
            <i className="logo-title">UI</i>
            <i className="logo-badge">6</i>
          </span>
        </p>
        <div className="inner-container">
          <i className="menu-bg top" />
          <i className="menu-bg middle" />
          <i className="menu-bg bottom" />
          <div className="menu-container">
            <ul className="menu-right">
              <li>
                <a>Login</a>
              </li>
              <li>
                <a>Create account</a>
              </li>
              <li>
                <a>Support</a>
              </li>
              <li>
                <a>About</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default Home;
